<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<div contenteditable="true" style="width: 100px;height: 100px" id="content">
    selection对象与range对象的使用实例

</div>
<button id="bold">
    点击加粗
</button>

</body>
<script type="text/javascript">
    var index = 0,
        isbold = false;
    $("#bold").click(function () {
        index++;
        if (index % 2 == 0) {
            isbold = false;
        } else {
            isbold = true;
        }
        rangeTest()
//        console.log()
//        getTxt1CursorPosition();
    });

    function rangeTest() {
        var  html,
            showRangeDiv = document.getElementById("content"),
            selection = document.getSelection();
        if(selection.rangeCount > 0) {

            html = "你选取了" + selection.rangeCount + "段内容<br/>";
            for(var i = 0; i < selection.rangeCount; i++) {
                var range = selection.getRangeAt(i);
                html += "第" + (i + 1) + "段内容为：" + range + "<br/>";
            }
            showRangeDiv.innerHTML = html;
        }
    }
</script>
</html>